<template>
  <div class="campus-assistant">
    <!-- Particle Background -->
    <div class="particle-container" ref="particleContainer">
      <canvas ref="particleCanvas" class="particle-canvas"></canvas>
    </div>

    <!-- Header -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <svg width="32" height="32" viewBox="0 0 32 32" class="logo-icon">
            <defs>
              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#2962FF"/>
                <stop offset="100%" style="stop-color:#1565C0"/>
              </linearGradient>
            </defs>
            <rect width="32" height="32" rx="8" fill="url(#logoGradient)"/>
            <path d="M8 12h16v2H8zm0 4h16v2H8zm0 4h12v2H8z" fill="white"/>
          </svg>
          <span class="logo-text">校园助手</span>
        </div>
        <div class="nav-buttons">
          <template v-if="!isLoggedIn">
            <el-button type="text" class="nav-btn">首页</el-button>
            <el-button
              type="primary"
              class="login-btn ripple-btn"
              @click="navigateToLogin"
            >登录</el-button>
          </template>
          <template v-else>
            <!-- 菜单搜索 -->
            <LaySearch id="header-search" />
            <!-- 全屏 -->
            <LaySidebarFullScreen id="full-screen" />
            <!-- 消息通知 -->
            <LayNotice id="header-notice" />
            <!-- 退出登录 -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link navbar-bg-hover select-none" style="display: flex;align-items: center;">
                <img :src="userAvatar" :style="avatarsStyle" style="width: 26px;height:26px;border-radius: 26px"/>
                <p v-if="username" class="dark:text-white">{{ username }}</p>
              </span>
              <template #dropdown>
                <el-dropdown-menu class="logout">
                  <el-dropdown-item @click="logout">
                    <IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" />
                    退出系统
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </div>
    </el-header>

    <!-- Hero Section -->
    <section class="hero-section">
      <div class="hero-content">
        <div class="hero-badge animate-fade-in">
          <span>Web3 校园助手正式上线</span>
        </div>
        <h1 class="hero-title animate-slide-up">
          <span class="gradient-text">智能化的</span><br>
          <span class="gradient-text">毕业设计助手</span>
        </h1>
        <p class="hero-subtitle animate-slide-up">
          集成多种开发工具，提供项目脚手架，源码集市，让毕业生毕业设计更加高效便捷
        </p>
        <div class="hero-buttons animate-slide-up">
          <el-button type="primary" size="large" class="start-btn ripple-btn" @click="handleStart">
            <svg width="16" height="16" viewBox="0 0 16 16" class="btn-icon">
              <path d="M8 0L10.5 5.5L16 8L10.5 10.5L8 16L5.5 10.5L0 8L5.5 5.5Z" fill="currentColor"/>
            </svg>
            立即开始
          </el-button>
          <el-button size="large" class="learn-btn ripple-btn" @click="handleRipple">了解更多</el-button>
        </div>
      </div>
      <div class="hero-decoration">
        <div class="floating-card" :style="{ transform: `translateY(${floatingOffset}px) rotate(${rotateOffset}deg)` }">
          <svg width="80" height="80" viewBox="0 0 80 80">
            <defs>
              <linearGradient id="cardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#2962FF"/>
                <stop offset="100%" style="stop-color:#1565C0"/>
              </linearGradient>
            </defs>
            <rect width="80" height="80" rx="16" fill="url(#cardGradient)"/>
            <path d="M20 30h40v3H20zm0 8h40v3H20zm0 8h30v3H20z" fill="white"/>
          </svg>
        </div>
      </div>
    </section>

    <!-- Core Features -->
    <section class="features-section">
      <div class="section-header">
        <h2 class="section-title">核心功能</h2>
        <p class="section-subtitle">强大的开发工具，助力您的毕业设计</p>
      </div>
      <div class="features-grid">
        <div class="feature-card"
             v-for="(feature, index) in features"
             :key="index"
             :class="{ 'featured': feature.featured }"
             @mouseenter="onFeatureHover"
             @mouseleave="onFeatureLeave">
          <div class="feature-icon" :style="{ backgroundColor: feature.color }">
            <component :is="feature.icon" />
          </div>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-desc">{{ feature.description }}</p>
        </div>
      </div>
    </section>

    <!-- Virtual Currency System -->
    <section class="currency-section">
      <div class="currency-content">
        <div class="currency-info">
          <h2 class="currency-title">虚拟币激励体系</h2>
          <p class="currency-desc">通过定制开发、推荐等方式赚取虚拟币，兑换云计算资源或会员特权</p>
          <div class="platform-support">
            <span class="platform-label">支持平台：</span>
            <div class="platform-badges">
              <span class="platform-badge">KOSH</span>
              <span class="platform-badge">TURKEY</span>
              <span class="platform-badge">跨系统交互</span>
            </div>
          </div>
          <div class="currency-features">
            <div class="currency-feature">
              <div class="currency-feature-icon gold">
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <path d="M12 2L15 9L22 9L17 14L19 21L12 17L5 21L7 14L2 9L9 9Z" fill="currentColor"/>
                </svg>
              </div>
              <div>
                <h4>每日签到获得银座</h4>
                <p>连续签到奖励递增</p>
              </div>
            </div>
            <div class="currency-feature">
              <div class="currency-feature-icon blue">
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <path d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22S2 17.5 2 12S6.5 2 12 2ZM12 6V18L18 12L12 6Z" fill="currentColor"/>
                </svg>
              </div>
              <div>
                <h4>定制开发奖励</h4>
                <p>完成项目获得丰厚银座</p>
              </div>
            </div>
            <div class="currency-feature">
              <div class="currency-feature-icon green">
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <path d="M16 1L21 6L16 11L14.5 9.5L17 7H9C5.7 7 3 9.7 3 13S5.7 19 9 19H11V21H9C4.6 21 1 17.4 1 13S4.6 5 9 5H17L14.5 2.5L16 1Z" fill="currentColor"/>
                </svg>
              </div>
              <div>
                <h4>推荐好友获得奖励</h4>
                <p>邀请好友，双方都有奖励</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Enhanced Wallet Card -->
        <div class="wallet-card enhanced-wallet">
          <div class="wallet-header">
            <div class="wallet-title">
              <svg width="24" height="24" viewBox="0 0 24 24" class="wallet-icon">
                <path d="M21 8V6C21 4.9 20.1 4 19 4H5C3.9 4 3 4.9 3 6V18C3 19.1 3.9 20 5 20H19C20.1 20 21 19.1 21 18V16H17C15.9 16 15 15.1 15 14V10C15 8.9 15.9 8 17 8H21ZM17 12C17.6 12 18 12.4 18 13S17.6 14 17 14S16 13.6 16 13S16.4 12 17 12Z" fill="currentColor"/>
              </svg>
              <span>我的钱包</span>
            </div>
            <div class="member-badge" :class="memberLevel">
              {{ memberLevel === 'vip' ? 'VIP会员' : '普通会员' }}
            </div>
          </div>

          <div class="wallet-balance">
            <div class="balance-item">
              <span class="balance-label">银座余额</span>
              <div class="balance-amount">
                <span class="currency-icon">🪙</span>
                <span class="amount">{{ walletData.silverBalance }}</span>
              </div>
            </div>
            <div class="balance-item">
              <span class="balance-label">人民币余额</span>
              <div class="balance-amount">
                <span class="currency-icon">💰</span>
                <span class="amount">¥{{ walletData.cnyBalance }}</span>
              </div>
            </div>
          </div>

          <!-- Daily Check-in -->
          <div class="checkin-section">
            <div class="checkin-header">
              <span>每日签到</span>
              <span class="checkin-streak">连续{{ checkinStreak }}天</span>
            </div>
            <el-button
              type="primary"
              class="checkin-btn ripple-btn"
              :disabled="hasCheckedIn"
              @click="handleCheckin">
              {{ hasCheckedIn ? '已签到' : '签到领取' }}
            </el-button>
          </div>

          <!-- Account Bindings -->
          <div class="account-bindings">
            <div class="binding-item">
              <span class="binding-label">SQL云配置</span>
              <el-button size="small" type="text" class="binding-btn">配置</el-button>
            </div>
            <div class="binding-item">
              <span class="binding-label">支付宝账户</span>
              <el-button size="small" type="text" class="binding-btn">绑定</el-button>
            </div>
          </div>

          <!-- Transaction History -->
          <div class="transaction-history">
            <div class="transaction-header">
              <span>交易记录</span>
              <el-button size="small" type="text">查看全部</el-button>
            </div>
            <div class="transaction-list">
              <div class="transaction-item" v-for="(transaction, index) in recentTransactions" :key="index">
                <div class="transaction-info">
                  <span class="transaction-desc">{{ transaction.description }}</span>
                  <span class="transaction-time">{{ transaction.time }}</span>
                </div>
                <span class="transaction-amount" :class="transaction.type">
                  {{ transaction.type === 'income' ? '+' : '-' }}{{ transaction.amount }}银座
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Enhanced Marketplace -->
    <section class="marketplace-section">
      <div class="section-header">
        <h2 class="section-title">源码集市</h2>
        <p class="section-subtitle">精选优质源码，支持法币和虚拟币双重支付</p>
      </div>
      <div class="marketplace-grid">
        <div class="product-card enhanced-product"
             v-for="(product, index) in enhancedProducts"
             :key="index"
             @mouseenter="onProductHover"
             @mouseleave="onProductLeave">
          <div class="product-image" :style="{ background: product.gradient }">
            <component :is="product.icon" class="product-icon" />
          </div>
          <div class="product-info">
            <h3 class="product-title">{{ product.title }}</h3>
            <div class="product-pricing">
              <div class="price-option">
                <span class="price-label">人民币</span>
                <span class="price-value">¥{{ product.cnyPrice }}</span>
              </div>
              <div class="price-divider">或</div>
              <div class="price-option silver">
                <span class="price-label">银座</span>
                <span class="price-value">{{ product.silverPrice }}银座</span>
              </div>
            </div>
            <div class="product-meta">
              <div class="product-rating">
                <span class="rating-stars">⭐</span>
                <span class="rating-score">{{ product.rating }}</span>
              </div>
              <span class="product-sales">销量: {{ product.sales }}</span>
            </div>
            <div class="product-actions">
              <el-button type="primary" size="small" class="ripple-btn" @click="handleRipple">
                立即购买
              </el-button>
              <el-button size="small" class="ripple-btn" @click="handleRipple">
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Statistics -->
    <section class="stats-section">
      <div class="stats-grid">
        <div class="stat-item" v-for="(stat, index) in stats" :key="index">
          <div class="stat-icon" :style="{ backgroundColor: stat.color }">
            <component :is="stat.icon" class="product-icon" />
          </div>
          <div class="stat-number">{{ stat.number }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <el-footer class="footer">
      <div class="footer-content">
        <div class="footer-logo">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <rect width="24" height="24" rx="6" fill="#2962FF"/>
            <path d="M6 9h12v1.5H6zm0 3h12v1.5H6zm0 3h9v1.5H6z" fill="white"/>
          </svg>
          <span>校园助手</span>
        </div>
        <div class="footer-text">
          <p>© 2024 校园助手，让毕业设计更简单</p>
          <div class="footer-links">
            <span class="footer-link">隐私政策</span>
            <span class="footer-link">服务条款</span>
            <span class="footer-link">联系我们</span>
            <span class="footer-link">关于我们</span>
          </div>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, markRaw, defineAsyncComponent, computed } from 'vue'
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'
import { multipleTabsKey } from '@/utils/auth'
import { useUserStoreHook } from '@/store/modules/user'
import { ElMessage } from "element-plus";
import LaySearch from "@/layout/components/lay-search/index.vue";
import LaySidebarFullScreen from "@/layout/components/lay-sidebar/components/SidebarFullScreen.vue";
import LayNotice from '@/layout/components/lay-notice/index.vue'
import { useNav } from '@/layout/hooks/useNav'
import IconifyIconOffline from '@/components/ReIcon/src/iconifyIconOffline'
import LogoutCircleRLine from '@iconify-icons/ri/logout-circle-r-line'

const userStore = useUserStoreHook()
const { userAvatar, username, avatarsStyle, logout } = useNav()

// Animation states
const floatingOffset = ref(0)
const rotateOffset = ref(0)
let animationId: number

// Wallet data
const walletData = ref({
  silverBalance: 1250,
  cnyBalance: 89.50
})

const memberLevel = ref('vip') // 'normal' or 'vip'
const checkinStreak = ref(7)
const hasCheckedIn = ref(false)

const recentTransactions = ref([
  { description: '每日签到', time: '今天 09:30', amount: 20, type: 'income' },
  { description: '购买Vue3模板', time: '昨天 14:20', amount: 150, type: 'expense' },
  { description: '推荐好友奖励', time: '2天前', amount: 50, type: 'income' },
  { description: '完成项目奖励', time: '3天前', amount: 200, type: 'income' }
])

// Particle system
const particleContainer = ref<HTMLDivElement>()
const particleCanvas = ref<HTMLCanvasElement>()
let particles: any[] = []

// Features data with updated colors
const features = ref([
  {
    title: 'SQL三线表生成',
    description: '智能生成标准三线表格式',
    color: '#2962FF',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/sql_icon.svg'))),
    featured: false
  },
  {
    title: 'ER图自动绘制',
    description: '根据SQL自动生成ER关系图',
    color: '#7C4DFF',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/er_icon.svg'))),
    featured: false
  },
  {
    title: '架构图生成',
    description: 'JSON/YAML格式架构图生成',
    color: '#00C853',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/jg_icon.svg'))),
    featured: true
  },
  {
    title: '更多工具',
    description: '持续更新的开发工具集',
    color: '#FFD700',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/more_icon.svg'))),
    featured: false
  }
])

// Enhanced products with dual pricing
const enhancedProducts = ref([
  {
    title: 'Vue3管理系统',
    cnyPrice: 299,
    silverPrice: 150,
    rating: 4.8,
    sales: 745,
    gradient: 'linear-gradient(135deg, #2962FF 0%, #1565C0 100%)',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/vue_icon.svg'))),
  },
  {
    title: 'React电商平台',
    cnyPrice: 499,
    silverPrice: 250,
    rating: 4.9,
    sales: 892,
    gradient: 'linear-gradient(135deg, #00BCD4 0%, #0097A7 100%)',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/react_icon.svg'))),
  },
  {
    title: 'SpringBoot微服务',
    cnyPrice: 399,
    silverPrice: 200,
    rating: 4.7,
    sales: 634,
    gradient: 'linear-gradient(135deg, #4CAF50 0%, #388E3C 100%)',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/boot_icon.svg'))),
  }
])

// Statistics data
const stats = ref([
  {
    number: '10,000+',
    label: '注册用户',
    color: '#2962FF',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/user_icon.svg'))),
  },
  {
    number: '50,000+',
    label: '工具使用次数',
    color: '#00C853',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/lighting_icon.svg'))),
  },
  {
    number: '1,000+',
    label: '源码销量',
    color: '#7C4DFF',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/goods_icon.svg'))),
  },
  {
    number: '98%',
    label: '用户满意度',
    color: '#FFD700',
    icon: markRaw(defineAsyncComponent(() => import('@/assets/svg/toptop_icon.svg'))),
  }
])

// Animation functions
const animate = () => {
  const time = Date.now() * 0.001
  floatingOffset.value = Math.sin(time) * 15
  rotateOffset.value = Math.sin(time * 0.5) * 5
  animationId = requestAnimationFrame(animate)
}

// Particle system initialization
const initParticles = () => {
  if (!particleCanvas.value) return

  const canvas = particleCanvas.value
  const ctx = canvas.getContext('2d')
  if (!ctx) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  // Create particles
  for (let i = 0; i < 50; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.5,
      vy: (Math.random() - 0.5) * 0.5,
      size: Math.random() * 2 + 1,
      opacity: Math.random() * 0.5 + 0.2
    })
  }

  const animateParticles = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    particles.forEach(particle => {
      particle.x += particle.vx
      particle.y += particle.vy

      if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1
      if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1

      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
      ctx.fillStyle = `rgba(41, 98, 255, ${particle.opacity})`
      ctx.fill()
    })

    requestAnimationFrame(animateParticles)
  }

  animateParticles()
}

// Event handlers
const handleRipple = (event: Event) => {
  const button = event.currentTarget as HTMLElement
  const ripple = document.createElement('span')
  const rect = button.getBoundingClientRect()
  const size = Math.max(rect.width, rect.height)
  const x = (event as MouseEvent).clientX - rect.left - size / 2
  const y = (event as MouseEvent).clientY - rect.top - size / 2

  ripple.style.width = ripple.style.height = size + 'px'
  ripple.style.left = x + 'px'
  ripple.style.top = y + 'px'
  ripple.classList.add('ripple')

  button.appendChild(ripple)

  setTimeout(() => {
    ripple.remove()
  }, 600)
}

const handleCheckin = () => {
  hasCheckedIn.value = true
  walletData.value.silverBalance += 20
  checkinStreak.value += 1

  // Add transaction record
  recentTransactions.value.unshift({
    description: '每日签到',
    time: '刚刚',
    amount: 20,
    type: 'income'
  })
}

const onFeatureHover = () => {
  // Feature hover effects
}

const onFeatureLeave = () => {
  // Feature leave effects
}

const onProductHover = () => {
  // Product hover effects
}

const onProductLeave = () => {
  // Product leave effects
}

const router = useRouter()

const navigateToLogin = () => {
  console.log("taiozhua")
  router.push('/login')
}

const isLoggedIn = ref(false)

const handleLogout = () => {
  userStore.logOut()
  ElMessage.success('已退出登录')
}

const handleStart = () => {
  router.push('/employ')
}

onMounted(() => {
  isLoggedIn.value = !!Cookies.get(multipleTabsKey)
  animate()
  nextTick(() => {
    initParticles()
  })
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
.campus-assistant {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  /* overflow-x: hidden; */
}

/* Particle Background */
.particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.particle-canvas {
  width: 100%;
  height: 100%;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out;
}

.animate-slide-up:nth-child(2) { animation-delay: 0.2s; }
.animate-slide-up:nth-child(3) { animation-delay: 0.4s; }
.animate-slide-up:nth-child(4) { animation-delay: 0.6s; }

/* Ripple Effect */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Header */
.header {
  display: flex;
  align-items: center;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(41, 98, 255, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-btn {
  color: #64748b;
}

.login-btn {
  background: linear-gradient(135deg, #2962FF 0%, #1565C0 100%);
  border: none;
}

/* Hero Section */
.hero-section {
  padding: 120px 24px 80px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 600px;
  position: relative;
  z-index: 1;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(41, 98, 255, 0.1);
  border: 1px solid rgba(41, 98, 255, 0.2);
  border-radius: 20px;
  color: #2962FF;
  font-size: 14px;
  margin-bottom: 24px;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

.gradient-text {
  background: linear-gradient(135deg, #2962FF 0%, #1565C0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 18px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 32px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.start-btn {
  background: linear-gradient(135deg, #2962FF 0%, #1565C0 100%);
  border: none;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.learn-btn {
  padding: 12px 24px;
  border: 1px solid #e2e8f0;
  background: white;
}

.hero-decoration {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-card {
  transition: transform 0.3s ease;
  filter: drop-shadow(0 10px 30px rgba(41, 98, 255, 0.3));
}

/* Features Section */
.features-section {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 18px;
  color: #64748b;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(41, 98, 255, 0.15);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card.featured {
  border: 2px solid #2962FF;
  transform: scale(1.05);
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.feature-desc {
  color: #64748b;
  line-height: 1.5;
}

/* Currency Section */
.currency-section {
  padding: 80px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  z-index: 1;
}

.currency-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 48px;
  align-items: start;
}

.currency-title {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
}

.currency-desc {
  font-size: 16px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
}

.platform-support {
  margin-bottom: 32px;
}

.platform-label {
  font-weight: 600;
  color: #1e293b;
  margin-right: 12px;
}

.platform-badges {
  display: inline-flex;
  gap: 8px;
}

.platform-badge {
  padding: 4px 12px;
  background: linear-gradient(135deg, #2962FF 0%, #1565C0 100%);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.currency-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.currency-feature {
  display: flex;
  align-items: center;
  gap: 16px;
}

.currency-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.currency-feature-icon.gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
}

.currency-feature-icon.blue {
  background: linear-gradient(135deg, #2962FF 0%, #1565C0 100%);
}

.currency-feature-icon.green {
  background: linear-gradient(135deg, #00C853 0%, #388E3C 100%);
}

/* Enhanced Wallet */
.enhanced-wallet {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(41, 98, 255, 0.15);
  border: 1px solid rgba(41, 98, 255, 0.1);
}

.wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.wallet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e293b;
  font-weight: 600;
}

.member-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.member-badge.vip {
  background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
  color: white;
}

.member-badge.normal {
  background: #f1f5f9;
  color: #64748b;
}

.wallet-balance {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.balance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.balance-label {
  color: #64748b;
  font-size: 14px;
}

.balance-amount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.amount {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}

.checkin-section {
  padding: 16px;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.05) 0%, rgba(41, 98, 255, 0.02) 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

.checkin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.checkin-streak {
  color: #2962FF;
  font-weight: 600;
  font-size: 12px;
}

.checkin-btn {
  width: 100%;
  background: linear-gradient(135deg, #2962FF 0%, #1565C0 100%);
  border: none;
}

.account-bindings {
  margin-bottom: 20px;
}

.binding-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.binding-label {
  color: #64748b;
  font-size: 14px;
}

.binding-btn {
  color: #2962FF;
}

.transaction-history {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.transaction-list {
  max-height: 200px;
  overflow-y: auto;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.transaction-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transaction-desc {
  font-size: 14px;
  color: #1e293b;
}

.transaction-time {
  font-size: 12px;
  color: #94a3b8;
}

.transaction-amount {
  font-weight: 600;
  font-size: 14px;
}

.transaction-amount.income {
  color: #00C853;
}

.transaction-amount.expense {
  color: #f44336;
}

/* Enhanced Marketplace */
.marketplace-section {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.enhanced-product {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.enhanced-product:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(41, 98, 255, 0.15);
}

.product-image {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.product-icon {
  width: 32px;
  height: 32px;
}

.product-info {
  padding: 24px;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
}

.product-pricing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.price-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-option.silver .price-value {
  color: #FFD700;
}

.price-label {
  font-size: 12px;
  color: #64748b;
}

.price-value {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.price-divider {
  color: #94a3b8;
  font-size: 12px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-sales {
  color: #64748b;
  font-size: 14px;
}

.product-actions {
  display: flex;
  gap: 12px;
}

.product-actions .el-button {
  flex: 1;
}

/* Statistics Section */
.stats-section {
  padding: 80px 24px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  position: relative;
  z-index: 1;
}

.stats-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
}

.stat-item {
  text-align: center;
  color: white;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  color: #94a3b8;
  font-size: 16px;
}

/* Footer */
.footer {
  background: #1e293b;
  color: white;
  padding: 40px 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 200px; /* 根据需要调整高度 */
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 0 24px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
}

.footer-links {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

.footer-link {
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: 100px 24px 60px;
  }

  .hero-title {
    font-size: 36px;
  }

  .currency-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-content {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .marketplace-grid {
    grid-template-columns: 1fr;
  }
}
</style>
